<template>
   <div class="farmerlist">
       <h4>BD绑定列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                销售人员：
                                <el-input
                                    clearable
                                    v-model="saleManName" class="filter-input"
                                    @keyup.enter.native="search_farmer()">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                店铺名称：
                                <el-input clearable
                                    v-model="merchantName" class="filter-input"
                                    @keyup.enter.native="search_farmer()">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                手机号：
                                <el-input clearable
                                    v-model="tel" class="filter-input"
                                    @keyup.enter.native="search_farmer()">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                邀请码：
                                <el-input clearable
                                    v-model="inviteCode" class="filter-input"
                                    @keyup.enter.native="search_farmer()">
                                </el-input>
                            </div>
                            <el-button type="primary" style="margin-left:20px;" @click="search_farmer()">搜索</el-button>
          </div>
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column  type="index"  width="50" label="序号" align="center"  :index="formatter"></el-table-column>
                 <el-table-column prop="merchantName" label="商铺名称" width="120" align="center"></el-table-column>
                 <el-table-column prop="merchantAddress" label="商铺地址" align="center">
                </el-table-column>
                <el-table-column prop="merchantTel" label="商铺联系人手机号" width="180" align="center"></el-table-column>
                 <el-table-column prop="inviteCode" label="邀请码" align="center" >
                </el-table-column>
                 <el-table-column prop="saleManName" label="销售员" align="center"  >
                </el-table-column>
                 <el-table-column prop="saleTel" label="销售员手机号" align="center">
                </el-table-column>
            </el-table>
             <div class="pagination">
                <!-- <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                    @current-change="getCurrentPage">
                </el-pagination> -->
                  <el-pagination
                    @size-change="getPageNum"
                    @current-change="getCurrentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                
             </div>
      </div>
  </div>  
</template>

<script>
import { BDList } from '@/request/api'
export default {
    data(){
        return {
            saleManName:'',
            merchantName:'',
            tel:'',
            inviteCode:'',
            loading:true,
            data:[],
            pageSize:10,
            pageNum:1,
            total:10
        }     
    },
    created(){
        this.getBDList();
    },
    methods:{
        // 搜索
        search_farmer(){
           this.getBDList();
        },
        //获取序号
        formatter(row, column ) {
            return  this.pageSize*(this.pageNum-1) + 1 + row;
        },
        //当前页
        getCurrentPage(e){
            this.pageNum = e;
            this.getBDList();
        },
        // 当前页的条数
        getPageNum(e){
            this.pageSize = e;
            this.getBDList();
        },
        // 获取bd列表
        getBDList(){
           BDList({
               saleManName:this.saleManName,
               merchantName:this.merchantName,
               tel:this.tel,
               inviteCode:this.inviteCode,
               pageSize:this.pageSize,
               pageNum:this.pageNum
           }).then(res => {
                 this.total = res.total;
                 this.loading = false;
                 this.data = res.rows;
           })
        }
    }
 }
</script>
<style  scoped>
.farmerlist {
        width:100%;
        height: 100%;
}
.farmerlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}
</style>